<template>
  <view class="feedback-detail-page">
    <!-- 页面标题 -->
    <view class="page-title">
      关于{{ feedbackInfo.violationCase?.violationCode }}的申诉
    </view>

    <!-- 基本信息 -->
    <view class="basic-info">
      <view class="info-item">
        <text class="label">反馈编号：</text>
        <text class="value">{{ feedbackInfo.violationCase?.violationCode }}</text>
      </view>
      <view class="info-item">
        <text class="label">提交时间：</text>
        <text class="value">{{ feedbackInfo.createTime }}</text>
      </view>
      <view class="info-item">
        <text class="label">最后更新：</text>
        <text class="value">{{ feedbackInfo.updateTime }}</text>
      </view>
    </view>

    <!-- 处理进度 -->
    <view class="progress-section">
      <view class="section-title">处理进度</view>
      <up-steps :steps="steps" active-color="#007AFF" inactive-color="#999" />
      <up-steps :current="feedbackInfo.feedbackStatus==0 ? '2' : '3' ">
        <up-steps-item v-for="(item, index) in steps" :key="index" :title="item.title" ></up-steps-item>
      </up-steps>
    </view>

    <!-- 反馈内容 -->
    <view class="content-section">
      <view class="section-title">反馈内容</view> 
      <view class="content-text">{{ feedbackInfo.feedbackContent }}</view>
    </view>

    <!-- 反馈类型 -->
    <view class="type-section">
      <view class="section-title">反馈类型</view>
      <view class="type-label">{{ feedbackInfo.feedbackType }}</view>
    </view>

    <!-- 提交的证据材料 -->
    <view class="evidence-section">
      <view class="section-title">提交的证据材料</view>
      <view class="evidence-list">
        <u-image 
          v-for="(item, index) in evidenceImages" 
          :key="index" 
          :src="imgUrl+item" 
          width="180rpx" 
          height="180rpx" 
          @click="previewImage(item)"
          class="evidence-image"
        />
      </view>
    </view>

    <!-- 关联案例 -->
    <view class="case-section">
      <view class="section-title">关联案例</view>
      <view class="case-item">
        <view class="case-header">
          <!-- <text class="case-id">违规案例</text> -->
          <text class="case-id">案例ID: {{ feedbackInfo.violationCase?.violationCode }}</text>
          <text class="view-link" @click="viewFullCase">查看完整案例</text>
        </view>
        <view class="case-details">
          <view class="detail-item">
            <text class="detail-label">违规时间：</text>
            <text class="detail-value">{{ feedbackInfo.violationCase?.createTime }}</text>
          </view>
          <view class="detail-item">
            <text class="detail-label">违规类型：</text>
            <text class="detail-value">{{ getBotLabel(feedbackInfo.violationCase?.violationType) }}</text>
          </view>
          <view class="detail-item">
            <text class="detail-label">违规内容：</text>
            <text class="detail-value">{{ feedbackInfo.violationCase?.violationCase }}</text>
          </view>
          <view class="detail-item">
            <text class="detail-label">处理结果：</text>
            <text class="detail-value">{{ feedbackInfo.violationCase?.processingResult }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 操作按钮 -->
    <view class="button-section" v-if="feedbackInfo.feedbackStatus==0 " >
      <up-button type="success" @click="cancelFeedback">取消反馈</up-button>
      <up-button type="primary" @click="addMaterials">补充材料</up-button>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import {onLoad} from '@dcloudio/uni-app'
import {imgUrl} from '@/config/index.js'
import {getFeedbackInfo,getDict,deleteFeedback} from '@/api/index'
import {onShow} from '@dcloudio/uni-app'
let feedbackId = ref('')
onLoad((options) => { 
  // 页面加载时执行
  feedbackId.value=options.id
  
  getDict('bot_type').then(res=>{
    console.log(res);
    actionTypes.value = res.data
  })
})
onShow(()=>{
  getFeedbackInfo({id:feedbackId.value}).then(res=>{
    feedbackInfo.value=res.data
    evidenceImages.value=res.data.materialImages.split(',')
    console.log(evidenceImages.value);
    
  })
})
let actionTypes=ref([])
const getBotLabel=(type)=>{ 
  let index=actionTypes.value.findIndex(i=>i.dictValue==type)
  return index>-1?actionTypes.value[index].dictLabel:''
}
let feedbackInfo=ref({})

const steps = ref([
  { title: '反馈已提交', status: 'success' },
  { title: '进入审核队列', status: 'success' },
  { title: '正在审核', status: 'process' },
  { title: '处理完成', status: 'wait' }
])

const feedbackContent = ref('该报告是行业公开资料，不属于商业推广，仅是正常的行业信息分享，不应判定为违规内容。且链接为行业协会官网，不存在安全风险。我们希望能够重新审核并解除对账号的限制，以便继续参与行业交流。')
const feedbackType = ref('内容被误解，属于正常行业资料分享')

const evidenceImages = ref([
  { src: '/static/images/industry-association.png' },
  { src: '/static/images/report-cover.png' }
])

const caseId = ref('C20240910003')
const violationTime = ref('2024-09-10 09:18:45')
const violationType = ref('发布外部链接及资源')
const violationContent = ref('【行业资料分享】《2024年度行业发展报告》已新鲜出炉，包含最新行业数据和趋势分析，需要的朋友可以点击下载：www.example.com/report2024.zip，提取码：8888')
const handlingResult = ref('内容删除 + 账号警告 + 限制发布功能7天')

// 方法定义
const previewImage = (src) => {
  uni.previewImage({
    urls: [src]
  })
}

const viewFullCase = () => {
  // 跳转到完整案例页面
  uni.navigateTo({
    url: '/pages/blacklist/detail?id='+feedbackInfo.value.violationCase.blackListId
  })
}

const cancelFeedback = () => {
  // 取消反馈逻辑
  uni.showModal({
    title: '提示',
    content: '确定要取消反馈吗？',
    success: (res) => {
      if (res.confirm) {
        // 执行取消操作
        // console.log('取消反馈')
        deleteFeedback({id:feedbackInfo.value.id}).then(res=>{
          if(res.code==200){
            uni.showToast({ title: '已取消反馈', icon: 'success' })
            setTimeout(() => {
              uni.navigateBack()
            }, 500)

          }else{
            uni.showToast({ title:res.msg, icon: 'error' })
          }
        })
      }
    }
  })
}

const addMaterials = () => {
  // 补充材料逻辑
  uni.navigateTo({
    url: '/pages/blacklist/feedback?id='+feedbackInfo.value.id
  })
}
</script>

<style scoped>
.feedback-detail-page {
  padding: 30rpx;
  background-color: #f8f8f8;
  padding-bottom: 120rpx;
  box-sizing: border-box;
}

.page-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 30rpx;
}

.basic-info {
  background-color: white;
  border-radius: 16rpx;
  padding: 20rpx;
  margin-bottom: 30rpx;
}

.info-item {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

.label {
  font-size: 28rpx;
  color: #666;
  width: 150rpx;
}

.value {
  font-size: 28rpx;
  color: #333;
  flex: 1;
}

.progress-section,
.content-section,
.type-section,
.evidence-section,
.case-section {
  background-color: white;
  border-radius: 16rpx;
  padding: 20rpx;
  margin-bottom: 30rpx;
}

.section-title {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
}

.content-text {
  font-size: 28rpx;
  color: #333;
  line-height: 1.5;
  padding: 20rpx;
  background-color: #f5f5f5;
  border-radius: 12rpx;
}

.type-label {
  font-size: 28rpx;
  color: #007AFF;
  padding: 10rpx 20rpx;
  background-color: #e6f4ff;
  border-radius: 12rpx;
  display: inline-block;
}

.evidence-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
}

.evidence-image {
  border-radius: 8rpx;
  overflow: hidden;
}

.case-item {
  border: 1rpx solid #eee;
  border-radius: 12rpx;
  padding: 20rpx;
}

.case-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.case-id {
  font-size: 28rpx;
  color: #333;
}

.view-link {
  font-size: 26rpx;
  color: #007AFF;
  text-decoration: underline;
}

.case-details {
  padding: 20rpx;
  background-color: #f5f5f5;
  border-radius: 12rpx;
}

.detail-item {
  display: flex;
  margin-bottom: 20rpx;
}

.detail-label {
  font-size: 28rpx;
  color: #666;
  width: 150rpx;
}

.detail-value {
  font-size: 28rpx;
  color: #333;
  flex: 1;
}

.button-section {
  display: flex;
  justify-content: space-between;
  margin-top: 30rpx;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 20rpx 30rpx;
  background-color: #fff;
  box-sizing: border-box;
  gap: 20rpx;
}

.button-section .u-button {
  width: 300rpx;
  padding: 20rpx;

}
</style>